<template>
  <el-card width="100%">

    <!-- 表单开始 -->
    <el-form :inline="true" class="demo-form-inline" label-width="68px" style="width: 100%;">
      <el-form-item>
        <el-button type="primary" icon="Plus" @click="drawer = true">请假申请</el-button>
      </el-form-item>
      <el-form-item label="请假类型" label-width="68px">
        <el-select v-model="leaveType" placeholder="请选择" clearable style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="Close" @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单结束 -->

    <!-- 数据渲染开始 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="leaveType" label="请假类型" align="center" width="180" />
      <el-table-column prop="reason" label="请假原因" align="center" width="180" />
      <el-table-column label="审批人" align="center" width="180">
        <template v-slot="scope">
          <el-tag :type="scope.row.staffStatus === 0 ? 'info' : scope.row.staffStatus === 1 ? 'success' : 'danger'" style="margin-left: 10px;">
            {{ scope.row.staffName }}
          </el-tag>
          <el-tag :type="scope.row.teacherStatus === 0 ? 'info' : scope.row.teacherStatus === 1 ? 'success' : 'danger'" style="margin-left: 10px;">
            {{ scope.row.teacherName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="请假状态" align="center" width="180">
        <template v-slot="scope">
          <el-tag :type="scope.row.status === 0 ? 'info' : scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 0 ? '未审批' : scope.row.status === 1 ? '审批通过' : '审批驳回' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="请假开始时间" min-width="140" align="center" />
      <el-table-column prop="endTime" label="请假结束时间" min-width="140" align="center" />
      <el-table-column prop="createdAt" label="创建时间" min-width="140" align="center" />
    </el-table>
    <!-- 数据渲染结束 -->

    <!-- 分页开始 -->
    <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[5, 10, 15, 20]" :background="true"
      layout="total, sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
    <!-- 分页结束 -->

    <!-- 抽屉开始 -->
    <LeaveAddView v-if="drawer" v-model:drawer="drawer" @updateData="getData" />
    <!-- 抽屉结束 -->
  </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import axios from '@/axios/index'
import LeaveAddView from './LeaveAddView.vue'
import { useStudentStore } from '@/stores/student'

const student = useStudentStore()
const page = ref(1)
const size = ref(5)
const total = ref(10)
const leaveType = ref('')
const drawer = ref(false)
const options = [
  {
    label: '病假',
    value: 1
  },
  {
    label: '事假',
    value: 2
  },
  {
    label: '婚假',
    value: 3
  },
  {
    label: '其他',
    value: 4
  },
]
const tableData = ref([])

//获取数据
let getData = function (current, limit, leaveType) {
  axios.get(`api/v1/front/leave`, {
    params: {
      page: current,
      size: limit,
      leaveType,
      studentId: student.studentInfo.id
    }
  }).then(response => {
    let result = response.data.data.data
    for (let i = 0; i < result.length; i++) {
      switch (result[i].leaveType) {
        case 1:
          result[i].leaveType = '病假'
          break
        case 2:
          result[i].leaveType = '事假'
          break
        case 3:
          result[i].leaveType = '婚假'
          break
        case 4:
          result[i].leaveType = '其他'
          break
      }
    }
    tableData.value = result
    total.value = response.data.data.total
    
  })
}

//模糊查询
let search = function () {
  getData(page.value, size.value, leaveType.value)
}

//清空
let clear = function () {
  leaveType.value = ''
  getData(page.value, size.value, leaveType.value)
}

onMounted(() => {
  getData(page.value, size.value, leaveType.value)
})

//page发生改变
const handleCurrentChange = (val) => {
  getData(val, size.value, leaveType.value)
}

//size发生改变
const handleSizeChange = (val) => {
  getData(page.value, val, leaveType.value)
}
</script>

<style scoped>
.el-card {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
}
</style>